<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<!DOCTYPE html>

<html>
<head>
    <%@include file="/WEB-INF/views/layout/miiteen/base.ref.jsp" %>
</head>
<body>
<div class="mainpage view">

    <!--顶部菜单-->
    <div class="page-topmenu">
        <div class="btn-panel">
            <el-button size="small" icon="el-icon-back" @click="back">返回</el-button>
        </div>
    </div>

    <!--编辑表单-->
    <el-form :ref="formid" :model="form" :rules="rules" size="small" :label-width="labelwidth"
             :label-position="labelposition"
             class="one-col" :validate-on-rule-change="false">

        <!--视业务进行更改-begin-->
        <input type="hidden" v-model="form.id"/>
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="slogan">
            <el-input v-model="form.slogan" placeholder="内容"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isDisplay">
            <el-radio-group v-model="form.isDisplay">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="部门" prop="deptName">
            <el-input v-model="form.deptName" placeholder="部门" @focus="selectDept"></el-input>
        </el-form-item>

        <el-form-item label="图片" prop="image">
            <el-upload
                    class="upload-demo"
                    action="/uploadfile/upload"
                    list-type="picture-card"
                    :before-upload="beforeUpload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :on-exceed="handleExceed"
                    :limit="1"
                    :file-list="dialogImageUrl"
            >
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="备注"></el-input>
        </el-form-item>
    </el-form>
</div>
<script>
    //初始化数据，必须放置在列表页面封装部分前
    function initVueOption(obj) {
        //设置控制器
        obj.data.controller = "${ctx}/basic/basicbillboards";
        //设置表单数据
        obj.data.form = ${basicBillboards};
        //设置校验规则，没有则删掉
        obj.data.rules = {

        }


        //选择部门
        obj.methods.selectDept = function () {
            miiteen.customsearch.open("sysDepartment", function (result) {
                Page.form.deptId = result[0].result1;
                Page.form.deptName = result[0].result2;

            }, {
                title: "部门选择",
                type: "tree",
                multiple: false,
                con: {deptIds: "${deptIds}"}
            })
        }


        /*//选择组织
        obj.methods.selectOrganize = function () {
            miiteen.customsearch.open("sysOrganize", function (result) {
                Page.form.organizeId = result[0].result1;
                Page.form.organizeName = result[0].result2;

            }, {
                title: "组织选择",
                type: "tree",
                multiple: false
            })
        }*/


        //上传图片=====================begin===============================
        obj.data.dialogVisible = false;
        obj.data.dialogImageUrl = [];
        //图片回显
        if(obj.data.form.image!=null){
            var image={name:"1",url:obj.data.form.image}
            obj.data.dialogImageUrl.push(image);
        }

        //上传文件之前
        obj.methods.beforeUpload = function (file) {
            var type = file.type;
            var size = file.size / 1024 / 1024;
            if (type != 'image/jpeg' && type != 'image/jpg' && type != 'image/GIF' && type != 'image/png' || size > 10) {
                window.parent.mtMsg.error("提示:上传图片只能是 JPG/PNG/GIF/JPEG格式的文件,大小不能超过 10MB!");
                return false;
            }

        }
        //上传成功
        obj.methods.handleSuccess = function (file) {
            Page.form.image = file.data;
        }
        //删除图片
        obj.methods.handleRemove = function () {
            Page.form.image = "";
        }
        //显示（放大）
        obj.methods.handlePreview = function (file) {
            obj.data.dialogImageUrl = file.url;
            obj.data.dialogVisible = true;
        }

        //超过限制
        obj.methods.handleExceed = function () {
            window.parent.mtMsg.error("只允许上传一个图片！");
        }
        //上传图片=====================end=================================

    }
</script>
<%@include file="/WEB-INF/views/layout/miiteen/page.view.ref.jsp" %>
</body>
</html>
